<template>
	<div class="card__body-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<el-table :data="state.tableList" v-loading="state.loading">
				<el-table-column label="导入时间" align="center" prop="create_time" :formatter="formatterCreateTime" />
				<el-table-column label="文件名称" align="center" prop="file_path" />
				<el-table-column label="操作人" align="center" prop="admin_username" />
				<el-table-column label="导入订单数" align="center" prop="order_num">
					<template #default="{ row }">
						<el-button type="primary" @click="onFileOrderList(row, 0)" link>{{ row.order_num }}</el-button>
					</template>
				</el-table-column>
				<el-table-column label="成功单数" align="center" prop="success_num">
					<template #default="{ row }">
						<el-button type="success" @click="onFileOrderList(row, 1)" link>{{ row.success_num }}</el-button>
					</template>
				</el-table-column>
				<el-table-column label="失败单数" align="center" prop="fail_num">
					<template #default="{ row }">
						<el-button type="danger" @click="onFileOrderList(row, 2)" link>{{ row.fail_num }}</el-button>
					</template>
				</el-table-column>
			</el-table>
			<PaginationComponent
				v-if="state.total"
				:total="state.total"
				v-model:page="state.queryParams.pageNum"
				v-model:limit="state.queryParams.pageSize"
				@pagination="getList"
			/>
		</el-card>
		<ViewFileOrderDialog ref="viewFileOrderDialogRef" />
	</div>
</template>

<script setup lang="ts" name="orderDeliverExportRecord">
import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
import { orderApi } from '/@/api';
import { timeDictionary } from '/@/utils/dictionary';

const ViewFileOrderDialog = defineAsyncComponent(() => import('./dialog/viewFileOrderDialog.vue'));

const OrderApi = orderApi();
// 定义变量内容
const state = reactive({
	showSearch: true,
	queryParams: {
		time: [],
		pageNum: 1,
		pageSize: 10,
	},
	tableList: [],
	loading: false,
	total: 0,
});

const viewFileOrderDialogRef = ref();

onMounted(() => {
	getList();
});

/********** 触发事件 **********/
// 文件订单列表
const onFileOrderList = (row: any, status: Number) => {	
	viewFileOrderDialogRef.value.openDialog({
		...row,
		status: status,
	});
};

/********** 方法事件 **********/
// 刷新列表
const getList = () => {
	state.loading = true;
	_orderFileList(state.queryParams);
};
// 导入时间字典
const formatterCreateTime = (row: any) => {
	return timeDictionary(row.create_time);
};

/********** 网络事件 **********/
// 导入待发货订单记录
const _orderFileList = (params: Object) => {
	OrderApi.orderFileList(params)
		.then((res) => {
			state.tableList = res.data.list;
			state.total = res.data.info.total;
			state.loading = false;
		})
		.catch(() => (state.loading = false));
};
</script>
